<template>
  <div>
    <el-button
      type="primary"
      style="margin-left: 30px; margin-top: 30px"
      @click="openDialog"
      >新增题目</el-button
    >
    <el-button
      type="primary"
      style="margin-left: 30px; margin-top: 30px"
      @click="addTestbar()"
      >加入题单</el-button
    >
    <el-button
      type="danger"
      style="margin-left: 30px; margin-top: 30px"
      v-if="multipleSelectionFlag"
      @click="multiDelete()"
      >批量删除</el-button
    >
    <el-input
      placeholder="查询题单内容"
      prefix-icon="el-icon-search"
      style="width: 200px; margin-left: 30px; margin-top: 30px"
      v-model="searchName"
      @keyup.enter.native="search()"
    >
    </el-input>
    <el-table
      ref="multipleTable"
      :data="testlist"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 30px"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="题目名称" width="200">
        <template slot-scope="scope">
          {{ scope.row.topics }}
        </template>
      </el-table-column>
      <el-table-column label="选项" width="500">
        <template slot-scope="scope">
          {{ scope.row.options}}
        </template>
      </el-table-column>
      <el-table-column label="对应选项分值" width="300">
        <template slot-scope="scope">
          {{ scope.row.answer }}
        </template>
      </el-table-column>
      <el-table-column label="effect" width="300">
        <template slot-scope="scope">
          {{ scope.row.effect }}
        </template>
      </el-table-column>      

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="reviseTestlist(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteTestlist(scope.row.uuid)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        :small="true"
        background
        :page-size="5"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-count="maxpage"
        :current-page.sync="currentPage"
        style="padding: 20px 0"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handCurrentPage"
        @prev-click="handprevPage"
        @next-click="handNextPage"
      />
    </div>
    <!-- 新增题目 -->
    <el-dialog class="newlistdialog" :title="diffTitle" :visible.sync="dialogFormVisible">
      <el-form :model="formdata" ref="testform">
        <el-form-item label="题目名称" :label-width="formLabelWidth" size="small">
          <el-input v-model="formdata.topics" autocomplete="off" style="width: 450px;"></el-input>
        </el-form-item>
        <el-form-item label="effect" :label-width="formLabelWidth" size="small">
          <el-input v-model="formdata.effect" autocomplete="off" style="width: 450px;" placeholder="必须加正或负符号"></el-input>
        </el-form-item>
        <el-form-item label="选项1" :label-width="formLabelWidth">
          <el-input v-model="formdata.options[0]" autocomplete="off" type="text" style="width: 200px;"
            >非常符合</el-input
          >
          <el-input 
            placeholder="该选项分值"
            style="margin-left: 50px; width: 200px;"
            v-model="formdata.answer[0]"
          > </el-input>
        </el-form-item>
        <el-form-item label="选项2" :label-width="formLabelWidth">
          <el-input v-model="formdata.options[1]" autocomplete="off" type="text" style="width: 200px;"
            >符合</el-input
          >
          <el-input 
            placeholder="该选项分值"
            style="margin-left: 50px; width: 200px;"
            v-model="formdata.answer[1]"
          > </el-input>
        </el-form-item>
        <el-form-item label="选项3" :label-width="formLabelWidth">
          <el-input v-model="formdata.options[2]" autocomplete="off" type="text"  style="width: 200px;"
            >比较符合</el-input
          >
          <el-input 
            placeholder="该选项分值"
            style="margin-left: 50px; width: 200px;"
            v-model="formdata.answer[2]"
          > </el-input>
        </el-form-item>
        <el-form-item label="选项4" :label-width="formLabelWidth">
          <el-input v-model="formdata.options[3]" autocomplete="off" type="text"  style="width: 200px;"
            >不符合</el-input
          >
          <el-input 
            placeholder="该选项分值"
            style="margin-left: 50px; width: 200px;"
            v-model="formdata.answer[3]"
          > </el-input>
        </el-form-item>
        <el-form-item label="选项5" :label-width="formLabelWidth">
          <el-input v-model="formdata.options[4]" autocomplete="off" type="text"  style="width: 200px;"
            >非常不符合</el-input
          >
          <el-input 
            placeholder="该选项分值"
            style="margin-left: 50px; width: 200px;"
            v-model="formdata.answer[4]"
          > </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newTestlist()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 加入题单 -->
    <el-dialog title="加入题单" :visible.sync="addTestbarVisible">
      <el-form>
        <el-form-item label="题单名称" :label-width="addDialogWith">
          <el-select v-model="addlist" placeholder="请选择题单">
            <el-option
              v-for="(item, index) in testbar"
              :key="index"
              :value="item.uuid"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTestbarVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureAddTest()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      loading: true,
      isShow: false,
      formLabelWidth: "120px",
      addDialogWith: "200px",
      flieData: null,
      fileList: [],
      docInfo: {
        page: 1,
        number: 10,
        type: "list",
        search: "",
      },
      searchName: "",
      dialogFormVisible: false,
      formdata: {
        uuid: "",
        topics: "",
        answer: [],
        options: [],
        effect: '',
      },
      testlist: [],
      testbar: [
        {
          uuid: "",
          name: "",
          list: [],
          topics: [],
          standard: "",
          scoring_criteria: "",
        },
      ],
      addlist: "",
      titleShow: false,
      addTestbarVisible: false,
      multipleSelectionFlag: false,
      multipleSelection: "",
      currentPage: 1,
      maxpage: 5,
    };
  },
  mounted() {
    this.getTestlist();
  },
  computed: {
    diffTitle() {
      if (this.titleShow == false) {
        return "修改题目";
      } else {
        return "新增题目";
      }
    },
  },
  methods: {
    //获取题库中的题目
    async getTestlist() {
      try {
        {
          let res = await this.$store.dispatch("getAllTestList", this.docInfo);
          
              this.maxpage = this.$store.state.test.maxpage;
              this.testlist = this.$store.state.test.testlist;
              this.loading = false;
            // .catch(() => {
            //   this.$message({
            //     message: "页面超出范围",
            //     type: "warning",
            //   });
            // });
        }
      } catch (error) {
        console.log(error);
      }
    },
    //添加题目
    async newTestlist() {
      try {
        {
      this.loading = true;
      if (this.titleShow == true) {
        if (this.Validate() != false) {
          // console.log("newlist");
          // console.log(this.formdata.effect);
          let dataIntarr = [];
          this.formdata.answer.forEach(item => {    //str数组转int数组
            dataIntarr.push(+item);
          });
          // console.log(dataIntarr);
          this.formdata.answer = dataIntarr;
          // console.log(this.formdata.answer);
          let res = await this.$store.dispatch("newTestList", this.formdata);
          console.log(res)
          if (res == "ok") {
            this.getTestlist();
            this.dialogFormVisible = false;
            this.loading = false;
            this.$message({
              type: "success",
              message: "题目新增成功",
            });
          }
        }
      } else {
        // 修改
        if (this.Validate() != false) {
          let dataIntarr = [];
          this.formdata.answer.forEach(item => {    //str数组转int数组
            dataIntarr.push(+item);
          });
          // console.log(dataIntarr);
          this.formdata.answer = dataIntarr;
          // console.log(this.formdata.answer);
          let res = await this.$store.dispatch("reviseTestList", this.formdata);
          if (res == "ok") {
            this.getTestlist();
            this.dialogFormVisible = false;
            this.loading = false;
            this.$message({
              type: "success",
              message: "题目修改成功",
            });
          }
        }
      }
        }
      } catch (error) {
        console.log(error);
      }
    },
    //, 删除题目
    async deleteTestlist(uuid) {
      this.$confirm("此操作将删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        var arr = [uuid];
        let res = await this.$store.dispatch("deleteTestList", arr);
        if (res == "ok") {
          this.getTestlist();
          this.$message({
            type: "success",
            message: "题目删除成功",
          });
        }
      });
    },
    // 修改题目
    reviseTestlist(data) {
      this.dialogFormVisible = true;
      this.titleShow = false;
      const newdata = this.formdata;
      // console.log("formdata", this.formdata);
      // console.log(data);
      this.formdata = { ...newdata, ...data};
    },
    openDialog() {
      //打开对话框
      this.dialogFormVisible = true;
      this.titleShow = true;
    },
    //获取题单
    async getTestbar() {
      let res = await this.$store.dispatch("getTestBar");
      if (res == "ok") {
        this.testbar = this.$store.state.test.testbar;
      }
    },
    // 加入题单
    async addTestbar() {
      if (this.multipleSelection.length == 0) {
        this.$confirm("请选择上传题目", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } else {
        this.addTestbarVisible = true;
        this.getTestbar();
      }
    },
    //确定加入
    async sureAddTest() {
      // console.log(this.addlist);
      this.$confirm("此操作将批量题目加入题单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let arr = [];
        let res;
        for (const item of this.multipleSelection) arr.push(item.uuid);
        // console.log(arr);
        for (const item of this.testbar) {
          if (this.addlist == item.uuid) {
            item.list = arr.concat(item.list); //连接数组
            item.list = [...new Set(item.list)]; //去重
            item.topics = [];
            // console.log(item);
            res = await this.$store.dispatch("reviseTestBar", item);
          }
        }
        if (res == "ok") {
          this.getTestlist();
          this.addTestbarVisible = false;
          this.$message({
            type: "success",
            message: "加入题单成功",
          });
        }
      });
    },

    // 批量删除
    async multiDelete() {
      this.$confirm("此操作将批量删除题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let arr = [];
        for (const item of this.multipleSelection) arr.push(item.uuid);
        // console.log(arr);
        let res = await this.$store.dispatch("deleteTestList", arr);
        if (res == "ok") {
          this.getTestlist();
          this.$message({
            type: "success",
            message: "题目删除成功",
          });
        }
      });
    },
    // 搜索题单内容
    async search() {
      // console.log(this.searchName);
      this.getTestbar();
      for (const item of this.testbar) {
        // console.log(item.name);
        if (item.name == this.searchName) {
          this.isSearchSucceed = true;
          this.docInfo.search = item.uuid;
          // console.log(item.uuid);
          this.getTestlist();
        }
        if (!this.isSearchSucceed) {
          this.$message({
            type: "error",
            message: "请输入正确的题单名称",
          });
        } else {
          this.$message({
            type: "success",
            message: "查找成功",
          });
        }
      }
    },
    //表单验证
    Validate() {
      this.$refs.testform.validate((valid) => {
        if (!valid) {
          return false;
        } else return true;
      });
    },
    //改变当前页
    handCurrentPage(val) {
      this.docInfo.page = val;
      this.getTestlist(this.docInfo);
    },
    //上一页
    handprevPage(val) {
      this.docInfo.page = val;
      this.getTestlist(this.docInfo);
    },
    //下一页
    handNextPage(val) {
      this.docInfo.page = val;
      this.getTestlist(this.docInfo);
    },
    handleSizeChange(val) {
      this.docInfo.number = val;
      this.getTestlist();
    },
    handleSelectionChange(val) {
      //   console.log(val);
      this.multipleSelectionFlag = true;
      this.multipleSelection = val;
      if (this.multipleSelection.length == 0) {
        // 如不进行判断则勾选完毕后批量删除按钮还是会在
        this.multipleSelectionFlag = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  margin-top: 2px;
  margin-left: 30vw;
}
</style>
